<template>
  <div class="data-cleanup-container">
    <div class="header">
      <h2>数据清理工具</h2>
      <p class="description">用于清理 backend/data 目录下的各种数据文件</p>
    </div>

    <!-- 主要内容区域 - 水平布局 -->
    <div class="main-content">
      <!-- 数据状态展示 -->
      <div class="status-section">
        <div class="section-header">
          <h3>数据目录状态</h3>
          <button @click="refreshStatus" :disabled="loading" class="refresh-btn">
            <i class="icon-refresh" :class="{ spinning: loading }"></i>
            刷新
          </button>
        </div>
        
        
        <div v-if="statusData" class="status-content">
          <div class="overview">
            <div class="stat-item">
              <span class="label">总大小:</span>
              <span class="value">{{ statusData.total_size_formatted }}</span>
            </div>
            <div class="stat-item">
              <span class="label">文件总数:</span>
              <span class="value">{{ statusData.total_files }}</span>
            </div>
            <div class="stat-item">
              <span class="label">目录路径:</span>
              <span class="value path">{{ statusData.path }}</span>
            </div>
          </div>

          <div class="subdirectories">
            <div class="subdirectories-header">
              <h4>子目录详情</h4>
            </div>
            <div v-if="!statusData.subdirectories" class="empty-state" style="background: #f8d7da; color: #721c24;">
              statusData.subdirectories 未定义
            </div>
            <div v-else-if="statusData.subdirectories.length === 0" class="empty-state">
              暂无子目录
            </div>
            <div v-else class="directory-list">
              <!-- 临时使用简单显示，确保基本功能正常 -->
              <div v-for="dir in statusData.subdirectories" :key="dir.path" class="simple-directory-item" style="border: 1px solid #e9ecef; border-radius: 6px; padding: 15px; margin-bottom: 10px; background: #fff;">
                <div class="dir-main" style="display: flex; align-items: center; gap: 15px;">
                  <div class="dir-info" style="flex: 1;">
                    <div class="dir-name" style="font-weight: 600; color: #495057; margin-bottom: 5px;">{{ dir.name }}</div>
                    <div class="dir-path" style="font-size: 12px; color: #6c757d; margin-bottom: 5px;">{{ dir.path }}</div>
                    <div v-if="dir.subdirs && dir.subdirs.length > 0" class="subdir-count" style="font-size: 11px; color: #28a745; font-style: italic;">
                      (包含 {{ dir.subdirs.length }} 个子目录)
                    </div>
                  </div>
                  <div class="dir-stats" style="display: flex; flex-direction: column; align-items: flex-end; gap: 5px;">
                    <span class="size" style="font-weight: 600; color: #28a745;">{{ dir.size_formatted }}</span>
                    <span class="count" style="font-size: 12px; color: #6c757d;">{{ dir.file_count }} 个文件</span>
                  </div>
                  <div class="dir-actions">
                    <button 
                      @click="selectDirectory(dir.path)"
                      :class="{ selected: selectedItems.includes(dir.path) }"
                      class="select-btn"
                      style="padding: 6px 12px; background: #e9ecef; border: 1px solid #ced4da; border-radius: 4px; cursor: pointer; font-size: 12px;"
                      :style="{ background: selectedItems.includes(dir.path) ? '#007bff' : '#e9ecef', color: selectedItems.includes(dir.path) ? 'white' : 'black', borderColor: selectedItems.includes(dir.path) ? '#007bff' : '#ced4da' }"
                    >
                      {{ selectedItems.includes(dir.path) ? '已选择' : '选择' }}
                    </button>
                  </div>
                </div>
                
                <!-- 显示子目录（如果有的话） -->
                <div v-if="dir.subdirs && dir.subdirs.length > 0" class="subdirectory-list" style="margin-top: 10px; margin-left: 20px; border-left: 2px solid #e9ecef; padding-left: 10px;">
                  <div v-for="subdir in dir.subdirs" :key="subdir.path" class="subdirectory-item" style="border: 1px solid #f8f9fa; border-radius: 4px; padding: 10px; margin-bottom: 5px; background: #f8f9fa;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                      <div style="flex: 1;">
                        <div style="font-weight: 500; color: #495057;">{{ subdir.name }}</div>
                        <div style="font-size: 11px; color: #6c757d;">{{ subdir.path }}</div>
                      </div>
                      <div style="display: flex; flex-direction: column; align-items: flex-end; gap: 2px;">
                        <span style="font-size: 12px; font-weight: 500; color: #28a745;">{{ subdir.size_formatted }}</span>
                        <span style="font-size: 11px; color: #6c757d;">{{ subdir.file_count }} 文件</span>
                      </div>
                      <button 
                        @click="selectDirectory(subdir.path)"
                        :class="{ selected: selectedItems.includes(subdir.path) }"
                        class="select-btn"
                        style="padding: 4px 8px; background: #e9ecef; border: 1px solid #ced4da; border-radius: 3px; cursor: pointer; font-size: 11px;"
                        :style="{ background: selectedItems.includes(subdir.path) ? '#007bff' : '#e9ecef', color: selectedItems.includes(subdir.path) ? 'white' : 'black', borderColor: selectedItems.includes(subdir.path) ? '#007bff' : '#ced4da' }"
                      >
                        {{ selectedItems.includes(subdir.path) ? '已选择' : '选择' }}
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 清理选项和操作 -->
      <div class="cleanup-section">
        <div class="section-header">
          <h3>清理选项</h3>
        </div>
        
        <div class="cleanup-options">
          <div class="option-group">
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="all"
                @change="clearSelection"
              >
              <span>清理所有数据</span>
            </label>
            
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="specific"
                @change="clearSelection"
              >
              <span>清理选定的目录</span>
            </label>
            <div v-if="cleanType === 'specific'" class="selection-hint">
              <small>请在上方数据目录状态中勾选要清理的目录</small>
              <div v-if="selectedItems.length > 0" class="selected-items">
                <small>已选择: {{ selectedItems.join(', ') }}</small>
              </div>
            </div>
            
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="logs"
                @change="clearSelection"
              >
              <span>仅清理日志文件</span>
            </label>
            
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="detection"
                @change="clearSelection"
              >
              <span>仅清理检测数据</span>
            </label>
            
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="rootheal"
                @change="clearSelection"
              >
              <span>仅清理根因分析数据</span>
            </label>
            
            <label class="radio-option">
              <input 
                type="radio" 
                v-model="cleanType" 
                value="defect"
                @change="clearSelection"
              >
              <span>仅清理缺陷识别数据</span>
            </label>
          </div>
        </div>

        <!-- 快速操作按钮 -->
        <div class="quick-actions">
          <h4>快速操作</h4>
          <div class="quick-buttons">
            <button @click="quickClean('logs')" class="quick-btn logs-btn">
              <i class="icon-logs"></i>
              清理日志
            </button>
            <button @click="quickClean('detection')" class="quick-btn detection-btn">
              <i class="icon-detection"></i>
              清理检测数据
            </button>
            <button @click="quickClean('rootheal')" class="quick-btn rootheal-btn">
              <i class="icon-rootheal"></i>
              清理根因分析
            </button>
            <button @click="quickClean('defect')" class="quick-btn defect-btn">
              <i class="icon-defect"></i>
              清理缺陷数据
            </button>
          </div>
        </div>

        <!-- 高级选项 -->
        <div class="advanced-options">
          <h4>高级选项</h4>
          <div class="advanced-controls">
            <label class="checkbox-option">
              <input type="checkbox" v-model="backupBeforeClean">
              <span>清理前创建备份</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="confirmEachFile">
              <span>逐个文件确认删除</span>
            </label>
            <label class="checkbox-option">
              <input type="checkbox" v-model="showDetailedLog">
              <span>显示详细清理日志</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- 预览区域 -->
    <div v-if="previewData" class="preview-section">
      <div class="section-header">
        <h4>清理预览</h4>
        <button @click="getPreview" :disabled="loading" class="preview-btn">
          更新预览
        </button>
      </div>
      
      <div class="preview-content">
        <div class="preview-summary">
          <span>将清理 {{ previewData.total_items }} 项，释放 {{ previewData.total_size_to_free_formatted }} 空间</span>
        </div>
        
        <div class="preview-items">
          <div 
            v-for="item in previewData.preview_items" 
            :key="item.name"
            class="preview-item"
          >
            <div class="item-info">
              <i :class="item.type === 'directory' ? 'icon-folder' : 'icon-file'"></i>
              <span class="item-name">{{ item.name }}</span>
              <span class="item-path">{{ item.path }}</span>
            </div>
            <div class="item-stats">
              <span class="size">{{ item.size_formatted }}</span>
              <span class="count">{{ item.file_count }} 个文件</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-section">
      <button 
        @click="getPreview" 
        :disabled="loading || !cleanType"
        class="btn btn-secondary"
      >
        预览清理
      </button>
      
      <button 
        @click="confirmCleanup"
        :disabled="loading || !previewData || confirmStep !== 'preview'"
        class="btn btn-warning"
      >
        确认清理
      </button>
      
      <button 
        v-if="confirmStep === 'confirm'"
        @click="executeCleanup"
        :disabled="loading"
        class="btn btn-danger"
      >
        执行清理
      </button>
    </div>

    <!-- 清理历史记录 -->
    <div v-if="cleanupHistory.length > 0" class="history-section">
      <div class="section-header">
        <h3>清理历史记录</h3>
        <button @click="clearHistory" class="clear-history-btn">
          清空历史
        </button>
      </div>
      
      <div class="history-content">
        <div class="history-list">
          <div 
            v-for="(record, index) in cleanupHistory" 
            :key="index"
            class="history-item"
          >
            <div class="history-info">
              <span class="history-type">{{ getTypeName(record.type) }}</span>
              <span class="history-time">{{ record.timestamp }}</span>
            </div>
            <div class="history-stats">
              <span class="history-items">{{ record.items }} 项</span>
              <span class="history-size">{{ record.size }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 确认对话框 -->
    <div v-if="showConfirmDialog" class="modal-overlay" @click="cancelConfirm">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>确认清理操作</h3>
          <button @click="cancelConfirm" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
          <p class="warning-text">
            <i class="icon-warning"></i>
            此操作将永久删除选定的文件，且无法恢复！
          </p>
          <div v-if="previewData" class="confirm-details">
            <p>将清理以下内容：</p>
            <ul>
              <li v-for="item in previewData.preview_items" :key="item.name">
                {{ item.name }} ({{ item.size_formatted }})
              </li>
            </ul>
            <p><strong>总计：{{ previewData.total_items }} 项，释放 {{ previewData.total_size_to_free_formatted }} 空间</strong></p>
          </div>
          <div class="confirm-input">
            <label>
              请输入 "D" /"d"以确认操作：
              <input 
                v-model="confirmText" 
                type="text" 
                placeholder="D/d"
                @keyup.enter="executeCleanup"
              >
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="cancelConfirm" class="btn btn-secondary">取消</button>
          <button 
            @click="executeCleanup" 
            :disabled="confirmText !== 'D' && confirmText !== 'd'"
            class="btn btn-danger"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>

    <!-- 结果提示 -->
    <div v-if="resultMessage" class="result-message" :class="resultType">
      <i :class="resultType === 'success' ? 'icon-success' : 'icon-error'"></i>
      <span>{{ resultMessage }}</span>
      <button @click="resultMessage = ''" class="close-btn">&times;</button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <p>处理中...</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, defineComponent } from 'vue'

// 目录项组件 - 使用 defineComponent
const DirectoryItem = defineComponent({
  name: 'DirectoryItem',
  props: {
    directory: Object,
    selectedItems: Array
  },
  emits: ['select'],
  setup(props, { emit }) {
    const isExpanded = ref(false)
    
    const toggleExpanded = () => {
      isExpanded.value = !isExpanded.value
    }
    
    const handleSelect = (path) => {
      emit('select', path)
    }
    
    
    return {
      isExpanded,
      toggleExpanded,
      handleSelect
    }
  },
  template: `
    <div class="directory-item">
      <div class="dir-main">
        <div class="dir-toggle" @click="toggleExpanded" v-if="directory.subdirs && directory.subdirs.length > 0">
          <i class="expand-icon" :class="{ expanded: isExpanded }">▶</i>
        </div>
        <div class="dir-info">
          <span class="dir-name">{{ directory.name }}</span>
          <span class="dir-path">{{ directory.path }}</span>
          <span v-if="directory.subdirs && directory.subdirs.length > 0" class="subdir-count">
            (包含 {{ directory.subdirs.length }} 个子目录)
          </span>
        </div>
        <div class="dir-stats">
          <span class="size">{{ directory.size_formatted }}</span>
          <span class="count">{{ directory.file_count }} 个文件</span>
        </div>
        <div class="dir-actions">
          <button 
            @click="handleSelect(directory.path)"
            :class="{ selected: selectedItems.includes(directory.path) }"
            class="select-btn"
          >
            {{ selectedItems.includes(directory.path) ? '已选择' : '选择' }}
          </button>
        </div>
      </div>
      <div v-if="isExpanded && directory.subdirs && directory.subdirs.length > 0" class="subdirectory-list">
        <DirectoryItem 
          v-for="subdir in directory.subdirs" 
          :key="subdir.path"
          :directory="subdir"
          :selected-items="selectedItems"
          @select="handleSelect"
        />
      </div>
    </div>
  `
})

export default {
  name: 'DataCleanup',
  components: {
    DirectoryItem
  },
  setup() {
    const loading = ref(false)
    const statusData = ref(null)
    const previewData = ref(null)
    const cleanType = ref('')
    const selectedItems = ref([])
    const showConfirmDialog = ref(false)
    const confirmText = ref('')
    const confirmStep = ref('preview') // preview, confirm
    const resultMessage = ref('')
    const resultType = ref('success')
    
    // 新增功能状态
    const backupBeforeClean = ref(false)
    const confirmEachFile = ref(false)
    const showDetailedLog = ref(false)
    const cleanupHistory = ref([])
    const systemStats = ref(null)

    // API 基础 URL
    const API_BASE = '/api/data-cleanup'

    // 获取数据状态
    const refreshStatus = async () => {
      loading.value = true
      try {
        const response = await fetch(`${API_BASE}/status`)
        const result = await response.json()
        
        if (result.success) {
          statusData.value = result.data
        } else {
          showResult('获取状态失败: ' + result.error, 'error')
        }
      } catch (error) {
        console.error('API调用错误:', error)
        showResult('网络错误: ' + error.message, 'error')
      } finally {
        loading.value = false
      }
    }

    // 获取清理预览
    const getPreview = async () => {
      if (!cleanType.value) {
        showResult('请选择清理类型', 'error')
        return
      }

      // 验证特定目录选择
      if (cleanType.value === 'specific' && (!selectedItems.value || selectedItems.value.length === 0)) {
        showResult('请先勾选要清理的目录', 'error')
        return
      }

      loading.value = true
      try {
        const requestData = {
          type: cleanType.value
        }
        
        if (cleanType.value === 'specific') {
          requestData.paths = selectedItems.value
        }


        const response = await fetch(`${API_BASE}/preview`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        })
        
        const result = await response.json()
        
        if (result.success) {
          previewData.value = result.data
          confirmStep.value = 'preview'
        } else {
          showResult('获取预览失败: ' + result.error, 'error')
        }
      } catch (error) {
        showResult('网络错误: ' + error.message, 'error')
      } finally {
        loading.value = false
      }
    }

    // 确认清理
    const confirmCleanup = () => {
      if (!previewData.value || previewData.value.preview_items.length === 0) {
        showResult('没有可清理的项目', 'error')
        return
      }
      
      showConfirmDialog.value = true
      confirmStep.value = 'confirm'
    }

    // 执行清理
    const executeCleanup = async () => {
      if (confirmStep.value === 'confirm' && confirmText.value !== 'D' && confirmText.value !== 'd') {
        return
      }

      // 验证特定目录选择
      if (cleanType.value === 'specific' && (!selectedItems.value || selectedItems.value.length === 0)) {
        showResult('请先勾选要清理的目录', 'error')
        return
      }

      loading.value = true
      showConfirmDialog.value = false
      
      try {
        const requestData = {
          type: cleanType.value,
          confirm: true
        }
        
        if (cleanType.value === 'specific') {
          requestData.paths = selectedItems.value
        }

        const response = await fetch(`${API_BASE}/clean`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        })
        
        const result = await response.json()
        
        if (result.success) {
          const data = result.data
          showResult(
            `清理完成！删除了 ${data.total_items} 项，释放了 ${data.total_size_freed_formatted} 空间`,
            'success'
          )
          // 刷新状态和预览
          await refreshStatus()
          previewData.value = null
          confirmStep.value = 'preview'
          selectedItems.value = []
        } else {
          showResult('清理失败: ' + result.error, 'error')
        }
      } catch (error) {
        showResult('网络错误: ' + error.message, 'error')
      } finally {
        loading.value = false
        confirmText.value = ''
      }
    }

    // 取消确认
    const cancelConfirm = () => {
      showConfirmDialog.value = false
      confirmText.value = ''
      confirmStep.value = 'preview'
    }

    // 选择目录
    const selectDirectory = (dirPath) => {
      if (cleanType.value !== 'specific') {
        cleanType.value = 'specific'
      }
      
      const index = selectedItems.value.indexOf(dirPath)
      if (index > -1) {
        selectedItems.value.splice(index, 1)
      } else {
        selectedItems.value.push(dirPath)
      }
    }

    // 清空选择
    const clearSelection = () => {
      selectedItems.value = []
      previewData.value = null
    }

    // 快速清理功能
    const quickClean = async (type) => {
      if (!confirm(`确定要清理 ${type} 数据吗？此操作不可撤销！`)) {
        return
      }
      
      loading.value = true
      try {
        const requestData = {
          type: type,
          confirm: true
        }

        const response = await fetch(`${API_BASE}/clean`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(requestData)
        })
        
        const result = await response.json()
        
        if (result.success) {
          const data = result.data
          showResult(
            `快速清理完成！删除了 ${data.total_items} 项，释放了 ${data.total_size_freed_formatted} 空间`,
            'success'
          )
          
          // 记录清理历史
          cleanupHistory.value.unshift({
            type: type,
            items: data.total_items,
            size: data.total_size_freed_formatted,
            timestamp: new Date().toLocaleString()
          })
          
          // 限制历史记录数量
          if (cleanupHistory.value.length > 10) {
            cleanupHistory.value = cleanupHistory.value.slice(0, 10)
          }
          
          await refreshStatus()
        } else {
          showResult('快速清理失败: ' + result.error, 'error')
        }
      } catch (error) {
        showResult('网络错误: ' + error.message, 'error')
      } finally {
        loading.value = false
      }
    }

    // 获取系统统计信息
    const getSystemStats = async () => {
      try {
        // 这里可以添加获取系统信息的API调用
        systemStats.value = {
          diskUsage: '85%',
          memoryUsage: '72%',
          cpuUsage: '45%',
          lastCleanup: cleanupHistory.value[0]?.timestamp || '从未清理'
        }
      } catch (error) {
        // 静默处理错误
      }
    }

    // 获取清理类型名称
    const getTypeName = (type) => {
      const typeNames = {
        'logs': '日志文件',
        'detection': '检测数据',
        'rootheal': '根因分析数据',
        'defect': '缺陷识别数据',
        'all': '所有数据',
        'specific': '选定目录'
      }
      return typeNames[type] || type
    }

    // 清空清理历史
    const clearHistory = () => {
      cleanupHistory.value = []
      showResult('清理历史已清空', 'success')
    }


    // 显示结果消息
    const showResult = (message, type = 'success') => {
      resultMessage.value = message
      resultType.value = type
      setTimeout(() => {
        resultMessage.value = ''
      }, 5000)
    }

    // 组件挂载时获取状态
    onMounted(() => {
      refreshStatus()
      getSystemStats()
    })

    return {
      loading,
      statusData,
      previewData,
      cleanType,
      selectedItems,
      showConfirmDialog,
      confirmText,
      confirmStep,
      resultMessage,
      resultType,
      backupBeforeClean,
      confirmEachFile,
      showDetailedLog,
      cleanupHistory,
      systemStats,
      refreshStatus,
      getPreview,
      confirmCleanup,
      executeCleanup,
      cancelConfirm,
      selectDirectory,
      clearSelection,
      quickClean,
      getSystemStats,
      getTypeName,
      clearHistory
    }
  }
}
</script>

<style scoped>
.data-cleanup-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.description {
  color: #7f8c8d;
  font-size: 16px;
}

/* 主要内容区域 - 水平布局 */
.main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.status-section,
.cleanup-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  height: 600px;
  display: flex;
  flex-direction: column;
}

/* 清理历史记录样式 */
.history-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.clear-history-btn {
  padding: 6px 12px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.clear-history-btn:hover {
  background: #c82333;
}

.history-content {
  padding: 20px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #007bff;
}

.history-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-type {
  font-weight: 600;
  color: #495057;
  font-size: 14px;
}

.history-time {
  font-size: 12px;
  color: #6c757d;
}

.history-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.history-items {
  font-size: 13px;
  color: #28a745;
  font-weight: 500;
}

.history-size {
  font-size: 12px;
  color: #6c757d;
}

/* 滚动条样式 */
.status-content::-webkit-scrollbar,
.cleanup-options::-webkit-scrollbar {
  width: 6px;
}

.status-content::-webkit-scrollbar-track,
.cleanup-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.status-content::-webkit-scrollbar-thumb,
.cleanup-options::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.status-content::-webkit-scrollbar-thumb:hover,
.cleanup-options::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .main-content {
    grid-template-columns: 1fr;
  }
  
  .status-section,
  .cleanup-section {
    height: 500px;
  }
}

@media (max-width: 768px) {
  .quick-buttons {
    grid-template-columns: 1fr;
  }
  
  .overview {
    flex-direction: column;
    gap: 15px;
  }
  
  .history-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .history-stats {
    align-items: flex-start;
  }
  
  .status-section,
  .cleanup-section {
    height: 400px;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.section-header h3 {
  margin: 0;
  color: #495057;
}

.refresh-btn,
.preview-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.refresh-btn:disabled,
.preview-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.icon-refresh {
  transition: transform 0.3s ease;
}

.icon-refresh.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.status-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.overview {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-item .label {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
}

.stat-item .value {
  font-size: 18px;
  font-weight: 600;
  color: #495057;
}

.stat-item .value.path {
  font-size: 14px;
  font-weight: 400;
  word-break: break-all;
}

.subdirectories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.subdirectories-header h4 {
  margin: 0;
  color: #495057;
}


.empty-state {
  text-align: center;
  color: #6c757d;
  padding: 20px;
}

.directory-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.directory-item {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  margin-bottom: 5px;
}

.dir-main {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fff;
  gap: 15px;
}

.dir-toggle {
  cursor: pointer;
  padding: 5px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
}

.expand-icon {
  font-size: 12px;
  color: #6c757d;
  transition: transform 0.2s ease;
}

.expand-icon.expanded {
  transform: rotate(90deg);
}

.subdirectory-list {
  margin-left: 20px;
  border-left: 2px solid #e9ecef;
  padding-left: 10px;
}

.dir-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dir-name {
  font-weight: 600;
  color: #495057;
}

.dir-path {
  font-size: 12px;
  color: #6c757d;
}

.subdir-count {
  font-size: 11px;
  color: #28a745;
  font-style: italic;
}

.dir-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.size {
  font-weight: 600;
  color: #28a745;
}

.count {
  font-size: 12px;
  color: #6c757d;
}

.select-btn {
  padding: 6px 12px;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.select-btn.selected {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.cleanup-options {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.radio-option:hover {
  background: #f8f9fa;
}

.radio-option input[type="radio"] {
  margin: 0;
}

.selection-hint {
  margin-left: 30px;
  margin-top: 5px;
  color: #6c757d;
  font-style: italic;
}

.selected-items {
  margin-top: 5px;
  color: #28a745;
  font-weight: 500;
}

.preview-section {
  padding: 20px;
  border-top: 1px solid #e9ecef;
}

.preview-summary {
  background: #e7f3ff;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  color: #0066cc;
  font-weight: 500;
}

.preview-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
  gap: 15px;
}

.item-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-name {
  font-weight: 500;
  color: #495057;
}

.item-path {
  font-size: 12px;
  color: #6c757d;
}

.item-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.action-section {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.modal-header h3 {
  margin: 0;
  color: #495057;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #6c757d;
}

.modal-body {
  padding: 20px;
}

.warning-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dc3545;
  font-weight: 500;
  margin-bottom: 20px;
  padding: 15px;
  background: #f8d7da;
  border-radius: 4px;
}

.confirm-details {
  margin-bottom: 20px;
}

.confirm-details ul {
  margin: 10px 0;
  padding-left: 20px;
}

.confirm-input label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.confirm-input input {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
}

.modal-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid #e9ecef;
}

.result-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1001;
  max-width: 400px;
}

.result-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.result-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

/* 快速操作样式 */
.quick-actions {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  flex-shrink: 0;
}

.quick-actions h4 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.quick-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  color: white;
}

.quick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.logs-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.detection-btn {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
}

.rootheal-btn {
  background: linear-gradient(135deg, #45b7d1, #96c93d);
}

.defect-btn {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

/* 高级选项样式 */
.advanced-options {
  padding: 20px;
  border-top: 1px solid #e9ecef;
  flex-shrink: 0;
}

.advanced-options h4 {
  margin: 0 0 15px 0;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.advanced-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.checkbox-option:hover {
  background: #f8f9fa;
}

.checkbox-option input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
}

.checkbox-option span {
  font-size: 13px;
  color: #495057;
}

/* 预览区域样式调整 */
.preview-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.preview-section .section-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.preview-section .section-header h4 {
  margin: 0;
  color: #495057;
  font-size: 16px;
}

/* 操作按钮区域样式 */
.action-section {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
}

/* 图标样式 */
.icon-refresh::before { content: "🔄"; }
.icon-success::before { content: "✅"; }
.icon-error::before { content: "❌"; }
.icon-warning::before { content: "⚠️"; }
.icon-folder::before { content: "📁"; }
.icon-file::before { content: "📄"; }
.icon-logs::before { content: "📋"; }
.icon-detection::before { content: "🔍"; }
.icon-rootheal::before { content: "🔧"; }
.icon-defect::before { content: "🐛"; }
</style>
